<template>
  <div :class="{ subPage: true, ipxPage: ifIphonex }">
    <div class="navTop" >
      <ul class="topTab">
        <li v-for="item in tabList" :key="item.key" :class="{'nowTab':tab===item.key}" @click="handleChange(item.key)" >
          {{item.title}}
        </li>
        <span :class="['slideSpan',{'chooseTabSpan':tab==='tab2'}]" ></span>
      </ul>
    </div>
    <div class="topBox" v-if="tab === 'tab1'">{{ dept_name }}</div>
    <div v-if="tab === 'tab1'"  class="outlineContent" >
      <!-- 工具盒子用来获取 展开后的高度 、不显示 -->
      <div class="centerBoxShow prey" >
        {{ dept_info }}
      </div>

      <div :class="[centerBox,'flexibleBox']" :style="{'height': centerBox === 'centerBoxShow'?preyHeight+'px':''}">
        {{ dept_info }}
      </div>
      <div class="showHide">
        <img :src="openUrl" @click="showHide"/>
      </div>
      <div class="centBox">
        <div class="titBox">选择专科门诊时间</div>
        <div class="tabsClass">
          <div :class="leftTabs" @click="tabsClick(0)">
            今天&nbsp;&nbsp;{{ today}}
          </div>
          <div :class="rightTabs" @click="tabsClick(1)">
            明天&nbsp;&nbsp;{{ tomorrow }}
          </div>
        </div>
        <div class="bomAuto clearfix">
          <div class="bomBox clearfix" v-if="dept_list.length != 0">
            <div
              class="bomItem clearfix"
              v-for="(item, index) in dept_list"
              :key="index"
            >
              <div class="dateItem">
                {{ item.period }}&nbsp;&nbsp;{{ item.begin_time }}-{{
                  item.end_time
                }}
              </div>
              <div class="numItem">¥&nbsp;{{ registration_fee }}</div>
              <button class="btnItem" open-type="getUserInfo" plain="true" @click.stop @getuserinfo="about($event,item)">
                <span >预约</span>
              </button>
              <div class="txtTiem">剩余{{ item.useful_tick }}</div>
            </div>
          </div>
        </div>
        <div class="nullBox" v-if="dept_list.length == 0 && !delayShowData">
          <div class="searchDefault">
            <img :src="nullUrl" />
          </div>
        </div>
      </div>
      <div class="modalClass" v-if="showModal">
        <div class="modalBox">
          <div class="closeBox" @click="close">
            <img :src="closeImg" />
          </div>
          <div class="modalTit">
            <img :src="descBgUrl" />
          </div>
          <div class="modalCenter">
            <div class="dataBox">
              <span class="itemPie"></span>
              <span class="itemSpan"
                >预约挂号针对<span class="itemSpanRed">复诊患者</span
                >,新患者及复诊超过三个月的患者,请线下医院就诊</span
              >
            </div>
            <div class="dataBox">
              <span class="itemPie"></span>
              <span class="itemSpan"
                >预约挂号时间为:<span class="itemSpanRed"
                  >24小时制</span
                ></span
              >
            </div>
            <div class="dataBox">
              <span class="itemPie"></span>
              <span class="itemSpan"
                >您与医生的<span class="itemSpanRed">交流时长为8分钟</span
                >,请把握时间</span
              >
            </div>
            <div class="dataBox">
              <span class="itemPie"></span>
              <span class="itemSpan"
                >三个月的复诊患者<span class="itemSpanRed">如需开药</span
                >,请在下一页面<span class="itemSpanRed"
                  >病情描述上传既往处方笺、病历</span
                ></span
              >
            </div>
            <div class="dataBox">
              <span class="itemPie"></span>
              <span class="itemSpan"
                >开具药品由快递配送,<span class="itemSpanRed"
                  >邮费到付</span
                ></span
              >
            </div>
          </div>
          <button class="modalFooter" open-type="getUserInfo" plain="true"  @getuserinfo="toDetails($event,3)">立即申请</button>
        </div>
      </div>
    </div>
    <div v-else class="outlineContent" >
      <dept isComponent="true" ></dept>
    </div>
  </div>
</template>

<script>
let app = getApp();
let store = app.store;
import api from "@/api/api";
import { mapState } from "vuex";
import storage from "@/utils/storage";
import nim from '@/utils/nim'
import dept from "../dept/index.vue"
//   import Bus from '@/utils/bus.js'
//   const { $Toast, $Message } = require('../../../../../static/iview/base/index')
//   import visitingTips from '@/components/visitingTips.vue'
export default {
  components: {
    dept
  },
  data() {
    return {
      showModal: false,
      modalStyle: "none",
      iconUrl: "/static/images/ImageText.png",
      doctorList: [],
      doctorInfo: {},
      interrogationKey: "",
      descBgUrl: "",
      centerBox: "centerBoxHide",
      nullUrl: "",
      leftTabs: "itemTabs2",
      rightTabs: "itemTabs",
      dept_list: [],
      dept_info: "",
      dept_name: "",
      today: "",
      tomorrow: "",
      dateTime: [],
      openUrl: "",
      closeImg: "",
      registration_fee: "",
      delayShowData:true,
      preyHeight: 110,
      tab: 'tab1',
      tabList: [
        {title: '专科门诊', key: 'tab1', count: 0},
        {title: '专家预约', key: 'tab2', count: 0}
      ],
    };
  },
  computed: {
    ...mapState(["ifIphonex"]),
  },
  onLoad(options) {
    Object.assign(this.$data, this.$options.data())
  },
  onReady() {
    // this.initBoxHeight()
  },
  onShow() {
    // this.getWechatList()
    // let dept_id = this.$route.query.id
    this.showModal = false;
    let doctor_id = this.$route.query.doctor_id;
    console.log(api.imgUrl + "noSpecialty.png", "图片路径");
    this.imgUrl = api.imgUrl;
    this.openUrl = this.imgUrl + "arrow_open.png";
    this.closeImg = this.imgUrl + "close.png";
    this.descBgUrl = this.imgUrl + "bg_professor_video_desc.png";
    this.leftTabs = "itemTabs2";
    this.rightTabs = "itemTabs";
    // this.openUrl = this.imgUrl+'open.png'
    // this.closeUrl = this.imgUrl+'close.png'
    this.nullUrl = this.imgUrl + "noSpecialty.png";
    this.centerBox = "centerBoxHide";
    this.registration_fee = "";
    this.getDateTime();
  },
  watch: {
    sessionsList: function (oldValue, newValue) {
      // this.dealData()
    },
  },
  methods: {
    close() {
      this.showModal = false;
      // this.hx_index = 0
    },
    initBoxHeight() {
      var query = wx.createSelectorQuery()
      query.select( '.prey' ).boundingClientRect((res)=>{
          console.log(res)
          this.preyHeight = res.height
          console.log(this.preyHeight)
      }).exec()

    },
    // 改变tab
    handleChange (value) {
      this.tab = value
    },
    about(e,item) {
      // 取消 视频问诊说明弹窗
      // this.showModal = true;
      this.doctorInfo = item;
      Object.assign(this.doctorInfo, { dept_name: this.dept_name });
      this.toDetails(e,3); // 点击预约直接表示立即申请
    },
    getDateTime() {
      let m1;
      let d1;
      let m2;
      let d2;
      let s1;
      let s2;
      let y1;
      let y2;
      let s3;
      let s4;
      //今天的时间
      var day1 = new Date();
      day1.setTime(day1.getTime());
      // var s2 = (((day2.getMonth()+1) * 1) < 10 ? ('0' + ((day2.getMonth()+1) * 1)) : ((day2.getMonth()+1) * 1)) + "-" + day2.getDate() < 10 ? '0' + day2.getDate() : day2.getDate();
      m1 = day1.getMonth() + 1;
      d1 = day1.getDate();
      m1 = m1 * 1 < 10 ? "0" + m1 : m1;
      d1 = d1 * 1 < 10 ? "0" + d1 : d1;
      y1 = day1.getFullYear();
      //明天的时间
      var day2 = new Date();
      day2.setTime(day2.getTime() + 24 * 60 * 60 * 1000);
      m2 = day2.getMonth() + 1;
      d2 = day2.getDate();
      m2 = m2 * 1 < 10 ? "0" + m2 : m2;
      d2 = d2 * 1 < 10 ? "0" + d2 : d2;
      y2 = day2.getFullYear();
      s1 = m1 + "-" + d1;
      s2 = m2 + "-" + d2;
      s3 = y1 + '' + m1 + '' + d1;
      s4 = y2 + '' + m2 + '' + d2;
      this.today = m1 + '月' + d1 + '日';
      this.tomorrow =  m2 + '月' + d2 + '日';
      console.log(s3,'s3');
      console.log(s4,'s4');
      this.dateTime = [s3, s4];
      let dept_id = this.$route.query.id;
      this.getDeptList(dept_id, s3);
    },
    getDeptList(e, j) {
      console.log(e);
      this.delayShowData = true
      this.$api
        .getDeptList({ dept_id: e, arrange_day: j }, { showLoading: true })
        .then((res) => {
          console.log(res);
          this.dept_info = res.data.dept_info;
          this.dept_name = res.data.dept_name;
          this.registration_fee = res.data.registration_fee;
          if (!this.registration_fee || this.registration_fee == 0) {
            this.registration_fee = "0.0";
          } else {
            this.registration_fee = parseFloat(
              this.registration_fee * 0.01
            ).toFixed(1);
          }
          let list = [];
          res.data.diagnose_times.forEach((item) => {
            if (item.available) {
              item.dept_limit = res.data.dept_limit
              list.push(item);
            }
          });
          this.dept_list = list;

          if (res.msg == 0) {
            this.nullUrl = this.imgUrl + "empty_view_no_arrange.png";
          } else {
            this.nullUrl = this.imgUrl + "noSpecialty.png";
          }
          console.log(this.dept_list);
          this.delayShowData = false
          setTimeout(() => {
            this.initBoxHeight()  // 获取滑动盒子后的高度
          }, 300);
        });
    },
    tabsClick(e) {
      let dept_id = this.$route.query.id;
      if (e == 0) {
        this.leftTabs = "itemTabs2";
        this.rightTabs = "itemTabs";
      } else {
        this.leftTabs = "itemTabs";
        this.rightTabs = "itemTabs2";
      }
      this.getDeptList(dept_id, this.dateTime[e]);
    },
    showHide() {
      this.centerBox =
        this.centerBox == "centerBoxShow" ? "centerBoxHide" : "centerBoxShow";
      this.openUrl =
        this.openUrl == this.imgUrl + "arrow_open.png"
          ? this.imgUrl + "arrow_close.png"
          : this.imgUrl + "arrow_open.png";
      console.log(this.openUrl);
    },
    getDoctor(e, doctor_id) {
      let list = [];
      this.$api
        .doctorList({ dept_id: e }, { showLoading: true })
        .then((res) => {
          console.log(doctor_id);
          if (doctor_id && doctor_id != "undefined") {
            res.data.forEach((item) => {
              if (item.doctor_id == doctor_id) {
                list.push(item);
                return;
              }
            });
          } else {
            list = res.data;
          }
          this.doctorList = list;
        });
    },
    // close (e) {
    //   this.modalStyle = 'none'
    //   // console.log(this.doctorInfo)
    //   // if (e == 1) {
    //     this.$router.push(`/pages/subPage/register/fillInMsg/main?doctorInfo=${JSON.stringify(this.doctorInfo)}&key=${this.interrogationKey}`)
    //   // }
    // },
    // toDoctorDetails(item) {
    //   // console.log('医生信息',JSON.stringify(this.doctorInfo))
    //   this.$router.push(`/pages/subPage/register/doctorDetails/main?id=${item.doctor_id}&name=${item.doctor_name}`)

    // },
    toDetails(e, value) {
      this.doctorInfo.registration_fee = this.registration_fee;
      this.judgeUserInfo(e,value)
    },
    // 用户是否登入判断
    judgeUserInfo(e,value) {
      if (e.mp.detail.rawData) {
      //用户按了允许授权按钮
      console.log("用户按了允许授权按钮");
      //判断是否登陆(是否有患者token)
      var token = this.$storage.getToken();
      if (token) {
        //判断是否认证
        var that = this;
        that.$api
          .get_user_info("", { showLoading: true })
          .then(function (data) {
            let accountInfo = data.data[0];
            accountInfo.headImg = data.data[0].head_portrait
              ? data.data[0].head_portrait
              : "";
            that.$storage.setAccountInfo(accountInfo);
            if (accountInfo.netease_token) {
              nim.login(accountInfo);
            }
            if (data.data[0].isreal == 0) {
              // '未认证' 去认证
              that.$router.push("/pages/qualification/main");
            } else if (data.data[0].isreal == 1) {
              // '已认证' 去挂号
              that.$router.push(
                `/pages/subPage/register/fillInMsg/main?doctorInfo=${JSON.stringify(
                  that.doctorInfo
                )}&key=${value}`
              );
            }
          });
        } else {
          //跳转登录页
          // console.log('用户未登录')
          let that = this;
          mpvue.login({
            success(res) {
              if (res.code) {
                that.$api.wechatLogin({ code: res.code }).then((data) => {
                  that.openid = data.data.openid;
                  that.key = data.data.session_key;
                  if (data.data.token) {
                    that.$storage.setToken(data.data.token);
                  } else {
                    that.$router.push("/pages/center/child/login/main");
                  }
                });
              } else {
                this.$router.push("/pages/center/child/login/main");
              }
            },
          });
        }
      } else {
        //用户按了拒绝按钮
        console.log("用户按了拒绝按钮");
      }
    },
  },
};
</script>

<style scoped lang="less">
.subPage {
  // display: flex;
  // flex-direction: column;
  background: #f9f9f9;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.navTop {
  height: 90rpx;
  width: 100%;
  background-color: #FFFFFF;
  // border-bottom: 1rpx solid #DDDDDD;
  border-top: 1rpx solid #DDDDDD;
  box-sizing: border-box;
  ul {
    position: relative;
    height: 100%;
    list-style: none;
    width: 100%;
    font-size: 30rpx;
    color: #666666;
    display: flex;
    li {
      flex: 1;
      text-align: center;
      line-height: 90rpx;
      // font-weight: bold;
    }
    .nowTab {
      color: #4B7AEA;
    }
  }
  .slideSpan {
    position: absolute;
    height: 5rpx;
    width: 135rpx;
    background-color: #4B7AEA;
    bottom: 2rpx;
    left: 16.5%;
    transition: left ease 0.3s;
  }
  .chooseTabSpan {
    left: 66.5%;
  }
}
.outlineContent {
  flex: 1;
  overflow-y:scroll ;
}
.topBox {
  width: 710rpx;
  height: 90rpx;
  background: rgba(74, 100, 234, 1);
  padding-left: 40rpx;
  font-size: 36rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  line-height: 90rpx;
}
.showHide {
  width: 100%;
  height: 30rpx;
  // border: 1rpx solid red;
  background: #ffffff;
  padding-bottom: 20rpx;
  text-align: center;
  display: flex;
  justify-content: center;
  img {
    width: 60rpx;
    height: 40rpx;
  }
}
.centBox {
  margin-top: 16rpx;
  background: #ffffff;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  .titBox {
    height: 96rpx;
    font-size: 36rpx;
    // font-family:PingFangSC-Medium,PingFang SC;
    font-weight: 600;
    color: rgba(51, 51, 51, 1);
    text-align: center;
    line-height: 96rpx;
    border-bottom: 2rpx solid #F9F9F9;
  }
  .tabsClass {
    // padding: 18rpx 95rpx;
    display: flex;
    justify-content: space-between;
    z-index: 9;
    display: flex;
    .itemTabs {
      flex: 1;
      text-align: center;
      height: 80rpx;
      line-height: 80rpx;
      font-size: 36rpx;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
    }
    .itemTabs2 {
      flex: 1;
      text-align: center;
      height: 80rpx;
      line-height: 80rpx;
      font-size: 36rpx;
      font-weight: 400;
      color: rgba(75, 122, 234, 1);
      border-bottom: 6rpx solid rgba(75, 122, 234, 1);
    }
  }
}
.prey {
  position: absolute;
  z-index: -9999;
  visibility: hidden;
}
.flexibleBox {
  transition: all .3s ease  0s;
}
.centerBoxHide {
  height: 220rpx;
  padding: 14rpx 40rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  font-size: 36rpx;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  line-height: 60rpx;
  background: #ffffff;
}
.centerBoxShow {
  padding: 14rpx 40rpx 0 40rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 36rpx;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  line-height: 60rpx;
  background: #ffffff;
}
.nullBox {
  // height: 800rpx;
  height: 750rpx;
  background: #ffffff;
  position: relative;
  //  height:600px;/去掉高度，只能垂直居中。
  display: flex;
  justify-content: center;
  align-items: center;
  // overflow-y: auto;
  // overflow-x: hidden;
  // overflow: hidden;
  .searchDefault {
    width: 720rpx;
    height: 100%;
    position: relative;
    // line-height: 493rpx;
    margin: 0 auto;
    img {
      width: 100%;
      height: 493rpx;
    }
  }
}
.bomAuto {
  overflow-y: auto;
  .bomBox {
    background: #F9F9F9;
    position: relative;
    //  height:600px;/去掉高度，只能垂直居中。
    display: flex;
    flex-direction: column;
    padding-bottom: 30rpx;
    // padding-bottom: 20rpx;
    // overflow-y: auto;
    // overflow-x: hidden;
    // height: 560rpx;
    // overflow: hidden;
    // height: 55%;
    .bomItem {
      margin: 29rpx;
      margin-bottom: 0rpx;
      height: 50rpx;
      background: #ffffff;
      box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.13);
      border-radius: 10rpx;
      padding: 30rpx 34rpx;
      padding-right: 0;
      display: flex;
      // flex: 1;
      // flex-direction: column;
      .dateItem {
        font-size: 34pxr;
        // font-family:PingFangSC-Regular,PingFang SC;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        margin-right: 14rpx;
        line-height: 50rpx;
        height: 50rpx;
        width: 42%;
      }
      .numItem {
        font-size: 34rpx;
        width: 120rpx;
        // font-family:PingFangSC-Regular,PingFang SC;
        font-weight: 400;
        color: rgba(255, 84, 83, 1);
        margin-right: 13rpx;
        line-height: 50rpx;
        height: 50rpx;
        text-align: center;
      }
      .btnItem {
        width: 125rpx;
        height: 52rpx;
        background: rgba(81, 114, 240, 0.1);
        border-radius: 29rpx;
        border: 1rpx solid rgba(81, 114, 240, 1);
        margin-right: 15rpx;
        text-align: center;
        line-height: 44rpx;
        font-size: 32prx;
        // font-family:PingFangSC-Regular,PingFang SC;
        font-weight: 400;
        color: rgba(81, 114, 240, 1);
        span {
          font-size: 32rpx;
        }
      }
      .txtTiem {
        font-size: 22rpx;
        // font-family:PingFangSC-Regular,PingFang SC;
        font-weight: 400;
        color: rgba(81, 114, 240, 1);
        line-height: 56rpx;
        height: 50rpx;
      }
    }
  }
}

.modalClass {
  position: absolute;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  background: rgba(0, 0, 0, 0.6);
  justify-content: flex-end;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  z-index: 9;
  // background:rgba(0,0,0,1);
  // opacity:0.6;
  .modalBox {
    width: 100%;
    // height:663rpx;
    z-index: 99;
    background: #ffffff;
    border-radius: 12px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    .closeBox {
      width: 60rpx;
      height: 60rpx;
      position: absolute;
      right: 0rpx;
      // right: -30rpx;
      // top: -30rpx;
      img {
        width: 100%;
        height: 100%;
        z-index: 99;
      }
    }
    .modalTit {
      width: 100%;
      img {
        width: 100%;
        height: 220rpx;
      }
    }
    .modalCenter {
      padding: 67rpx 30rpx 33rpx 37rpx;
      display: flex;
      flex-direction: column;
      .dataBox {
        margin-bottom: 40rpx;
        span {
          display: inline-block;
          font-size: 28rpx;
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
          vertical-align: top;
        }
        .itemPie {
          width: 12rpx;
          height: 12rpx;
          background: rgba(74, 100, 234, 1);
          border-radius: 50%;
          margin-right: 15rpx;
          margin-top: 13rpx;
          // vertical-align: middle;
          // margin-bottom: 5rpx;
        }
        .itemSpan {
          width: 95%;
          font-size: 14px;
          // font-family:PingFangSC-Medium,PingFang SC;
          font-weight: 500;
          color: rgba(102, 102, 102, 1);
        }
        .itemSpanRed {
          color: #ff5453;
          color: #ff5453;
          font-size: 28rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          display: inline;
        }
      }
    }
    .modalFooter {
      // width:544rpx;
      height: 76rpx;
      background: rgba(74, 100, 234, 1);
      border-radius: 38rpx;
      font-size: 28rpx;
      font-weight: 600;
      color: rgba(255, 255, 255, 1);
      margin: 0 37rpx 63rpx 37rpx;
      line-height: 76rpx;
      text-align: center;
    }
    .btnDis {
      background: #c5c8ce;
    }
  }
}
</style>
